<template>
  <div class="radio_group" :class="{ disabled: disabled }">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";
const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean],
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:modelValue", "change"]);
const radio_disabled = ref(props.disabled);
const radioValue = ref(props.modelValue);
const updateRadioValue = (value) => {
  radioValue.value = value;
  emits("update:modelValue", value);
  emits("change", value);
};
provide("radioValue", {
  radioValue,
  updateRadioValue,
  radio_disabled,
});
</script>
<style scoped>
.radio_group {
  padding: 10px;
  display: flex;
  gap: 15px;
  user-select: none;
}
.disabled {
  opacity: 0.5;
  cursor: var(--cursor_disabled);
}
</style>
